<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='用戶注冊',pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div class="content-wrapper" >
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4 floating-box">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">请注册</h3>
                                    </div>
                                    <div class="panel-body" id="app-user-register">

                                        <form method="POST" th:action="@{/auth/register}" accept-charset="UTF-8">
                                            <div class="alert alert-warning">
                                                请使用邮箱进行注册
                                            </div>
                                            <div class="form-group ">
                                                <label class="control-label" >邮箱</label>
                                                <input class="form-control" v-model="form.field.email" @blur="checkEmailExist()" placeholder="邮箱">
                                                <template v-if="form.error.email"><span class="text-danger" >{{form.error.email}}</span></template>
                                            </div>
                                            <div class="form-group ">
                                                <label class="control-label" >昵称</label>
                                                <input class="form-control" v-model="form.field.nickname" type="text"  placeholder="昵称">
                                                <template v-if="form.error.nickname"><span class="text-danger" >{{form.error.nickname}}</span></template>
                                            </div>
                                            <div class="form-group ">
                                                <label class="control-label" >密码</label>
                                                <input class="form-control" v-model="form.field.password" type="password"  placeholder="密码">
                                                <template v-if="form.error.password"><span class="text-danger" >{{form.error.password}}</span></template>
                                            </div>
                                            <div class="form-group ">
                                                <label class="control-label" >确认密码</label>
                                                <input class="form-control" v-model="form.field.confirmPassword"  type="password" placeholder="确认密码">
                                                <template v-if="form.error.confirmPassword"><span class="text-danger" >{{form.error.confirmPassword}}</span></template>
                                            </div>

                                            <!--<div class="form-group ">-->
                                                <!--<label for="captcha" class="control-label">图片验证码</label>-->
                                                <!--<div class="captcha-input">-->
                                                    <!--<input id="captcha" class="form-control" name="captcha" placeholder="请填写验证码">-->
                                                    <!--<img class="thumbnail captcha" src="" onclick="this.src='/captcha/flat?'+Math.random()" title="点击图片重新获取验证码">-->
                                                <!--</div>-->
                                            <!--</div>-->

                                            <div class="form-group ">
                                                <label class="control-label" for="code">邮箱验证码</label>
                                                <input class="form-control" v-model="form.field.code" type="text" placeholder="请填写邮箱验证码">
                                                <template v-if="form.error.code"><span class="text-danger" >{{form.error.code}}</span></template>
                                                <button id="code" class="btn btn-info" type="button" @click="fetchCode()">获取验证码</button>

                                            </div>

                                            <button type="button" @click="submitForm()" class="btn btn-lg btn-success btn-block">
                                                <i class="fa fa-btn fa-sign-in"></i> 注册
                                            </button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />

        <script>
            var appUserRegister = new Vue({
                el:'#app-user-register',
                data () {
                    return {
                        form:{
                            field:{
                                email:"",
                                nickname:"",
                                password:"",
                                confirmPassword:"",
                                code:""
                            },
                            error:{
                                email:"",
                                nickname:"",
                                password:"",
                                confirmPassword:"",
                                code:""
                            }
                        },
                        countDown:60
                    }
                },
                methods:{
                    submitForm() {
                        if (!this.form.field.email) {
                            this.form.error.email = '请输入邮箱';
                            return false;
                        } else {
                            this.form.error.email = '';
                        }
                        if (!util.validation.checkEmail(this.form.field.email)) {
                            this.form.error.email = '邮箱格式不正确';
                            return false;
                        } else {
                            this.form.error.email = '';
                        }
                        if (!this.form.field.nickname) {
                            this.form.error.nickname = '请填写昵称';
                            return false;
                        } else {
                            this.form.error.nickname = '';
                        }
                        if (!this.form.field.password) {
                            this.form.error.password = '请输入密码';
                            return false;
                        } else {
                            this.form.error.password = '';
                        }
                        if (!this.form.field.confirmPassword) {
                            this.form.error.confirmPassword = '请再次输入密码';
                            return false;
                        }
                        if (this.form.field.password != this.form.field.confirmPassword) {
                            this.form.error.confirmPassword = '两次密码不一致';
                            return false;
                        } else {
                            this.form.error.confirmPassword = '';
                        }

                        var _this = this;
                        $.post('/auth/register',this.form.field,function (response) {
                            if (response.emailStatus === false) {
                                _this.form.error.email = response.msg
                                return false;
                            }
                            if (response.codeStatus === false) {
                                _this.form.error.code = response.msg
                                return false;
                            }
                            if (response.failure === true) {
                                alert(response.msg);
                                return false;
                            }
                            if (response.success === success) {
                                window.location.href = '/user'
                            }
                        },'json');
                    },

                    checkEmailExist() {
                        if (!this.form.field.email) {
                            this.form.error.email = '请输入邮箱';
                            return false;
                        }
                        var _this = this;
                        $.post('/auth/checkEmailExist',{email:this.form.field.email},function (response) {
                            if (response.exist === true) {
                                _this.form.error.email = '该邮箱已经注册过了';
                            } else {
                                _this.form.error.email = '';
                            }
                        },'json');
                    },
                    fetchCode() {
                        var _this = this;
                        if (!this.form.field.email) {
                            this.form.error.email = "请输入邮箱";
                            return false;
                        } else {
                            this.form.error.email = "";
                        }
                        if (!util.validation.checkEmail(this.form.field.email)) {
                            this.form.error.email = '邮箱格式不正确';
                            return false;
                        } else {
                            this.form.error.email = '';
                        }
                        this.setTime(_this);
                        $.post('/auth/getCode',{email:this.form.field.email},function (res) {

                        });
                    },

                    setTime(_this) {
                        var countDown = this.countDown;
                        if (countDown == 0) {
                            $('#code').attr('disabled',false);
                            $('#code').html('获取验证码')
                            this.countDown = 60;
                            return false;
                        } else {
                            $('#code').attr('disabled',true);
                            $('#code').html("重新发送(" + countDown + ")")
                            this.countDown--;
                        }

                        setTimeout(function() {
                            _this.setTime(_this);
                        },1000,_this)
                    }
                }
            });
        </script>
    </body>
</html>
